<div class="demo-block demo-layout">
  <h2>基础布局</h2>
  <el-row>
    <el-col span="24">
      <div class="grid-content bg-purple-dark"></div>
    </el-col>
  </el-row>
  <el-row>
    <el-col span="12">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="12">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
  </el-row>
  <el-row>
    <el-col span="8">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="8">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col span="8">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
  <el-row>
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
  </el-row>
  <el-row>
    <el-col span="4">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="4">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col span="4">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="4">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col span="4">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="4">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
  </el-row>
  <h2>分栏间隔</h2>
  <el-row gutter="20">
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
  <h2>分栏偏移</h2>
  <el-row gutter="20">
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="6" offset="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
  <el-row gutter="20">
    <el-col span="6" offset="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="6" offset="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
  <el-row gutter="20">
    <el-col span="12" offset="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
  <h2>混合布局</h2>
  <el-row gutter="20">
    <el-col span="16">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="8">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
  <el-row gutter="20">
    <el-col span="8">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="8">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="4">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="4">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
  <el-row gutter="20">
    <el-col span="4">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="16">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="4">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
  <h2>对齐方式</h2>
  <el-row type="flex" class="row-bg">
    <el-col span="6">
      <div class="grid-content bg-purple">111</div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple-light">111</div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple">11</div>
    </el-col>
  </el-row>
  <el-row type="flex" class="row-bg" justify="center">
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
  <el-row type="flex" class="row-bg" justify="end">
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
  <el-row type="flex" class="row-bg" justify="space-between">
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
  <el-row type="flex" class="row-bg" justify="space-around">
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col span="6">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
  <h2>响应式布局</h2>
  <el-row :gutter="10">
    <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
    <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
  </el-row>
</div>